<template>

  <view class="detail">
	  <view class="detail-top">
		  <view class="detail-top-left">
			  <view class="detail-top-no">
					合约编号：{{receipt.debtnum}}
			  </view>
			  <view class="detail-top-label">合约总额(元)</view>
			  <view class="detail-top-num">
					{{receipt.surplus_money}}
			  </view>
		  </view>
		  <view class="detial-top-right">
		  		<view class="detail-top-btn">{{receipt.repay_status}}</view>
		  </view>
	  </view>
	  
	  <view class="detail-card">
		  <view class="detail-card-top">
				<image src="../../../static/images2/bg-zdt.png" mode="" class="img"></image>
				<view class="detail-card-top__inner">
					<view class="detail-card-top-title">合约详情</view>
					<view class="detail-card-top-no">{{receipt.debtnum}}</view>
				</view>
		  </view>
		  <view class="detail-card-main">
			  <view class="detail-card-line">
				  由于<view class="bold">{{receipt.loanpurpose}}</view>，本人通过<view class="bold">{{receipt.zztype}}</view>方式
				  向<view class="bold">{{receipt.creditor.username}}</view>(身份证号码:<view class="bold">{{receipt.creditor.idcard}}</view>)借取本金
				  人民币<view class="bold">{{num2chinese(receipt.loan_money)}}(￥{{receipt.loan_money}})</view>，
				  总利息金额<view class="bold">壹元(1.00)</view>
				  即借款年利率<view class="bold">{{receipt.year_rate}}%</view>,自<view class="bold">{{receipt.loan_date}}出借</view>，需在
				  <view class="bold">{{receipt.repay_date}}一次性还本付息</view>。
			  </view>
			  <view class="detail-card-line">
				  本借条自「<view class="bold">出借人</view>」向「<view class="bold">借款人</view>」支付借款本金时
				  生效。本借条纠纷由出借人所在地、债务人所在地地方人民法院管辖。
			  </view>
		  </view>
	  </view>
	  
	  <view class="detail-block">
		  <view class="detail-block-title">
			  借款人信息
		  </view>
		  <view class="detail-block-main">
			  <view class="line-item">
				  <view class="line-item-label">姓名</view>
				  <view class="line-item-value">{{receipt.obligor.username}}</view>
			  </view>
			  <view class="line-item">
				<view class="line-item-label">手机号</view>
				<view class="line-item-value">{{receipt.obligor.mobile}}</view>
			  </view>
			  <view class="line-item">
				<view class="line-item-label">身份证号</view>
				<view class="line-item-value">{{receipt.obligor.idcard}}</view>
			  </view>
		  </view>
	  </view>
	  
	  <view class="detail-block">
	  		  <view class="detail-block-title">
	  			  出借人信息
	  		  </view>
	  		  <view class="detail-block-main">
	  			  <view class="line-item">
	  				  <view class="line-item-label">姓名</view>
	  				  <view class="line-item-value">{{receipt.creditor.username}}</view>
	  			  </view>
	  			  <view class="line-item">
	  				<view class="line-item-label">手机号</view>
	  				<view class="line-item-value">{{receipt.creditor.mobile}}</view>
	  			  </view>
	  			  <view class="line-item">
	  				<view class="line-item-label">身份证号</view>
	  				<view class="line-item-value">{{receipt.creditor.idcard}}</view>
	  			  </view>
	  		  </view>
	  </view>
	  
	  <view class="detail-block">
		  <view class="detail-block-title">付款信息</view>
		  <view class="detail-block-main">
			  <view class="line-item">
					<view class="line-item-label">近期还款时间</view>
					<view class="line-item-value">{{receipt.repay_date}}</view>
			  </view>
			  <view class="line-item">
					<view class="line-item-label">借款周期</view>
					<view class="line-item-value">{{receipt.loan_date}}到{{receipt.repay_date}}</view>
			  </view>
			  <view class="line-item">
					<view class="line-item-label">还款方式</view>
					<view class="line-item-value">{{receipt.repay_type}}</view>
			  </view>
			  <view class="line-item" v-if="receipt.repay_type!='一次性还款'">
					<view class="line-item-label">付款周期</view>
					<view class="line-item-value">
						每期还款{{ receipt.cycle_money }}元，共{{
									receipt.cycle_num
						}}期 <view v-if="receipt.repay_type != '灵活分期'">，还款日每月{{ receipt.date }}日</view>
					</view>
			  </view>
			  <view class="line-item">
				  <view class="line-item-label">年化利率</view>
				  <view class="line-item-value">{{receipt.year_rate}}%</view>
			  </view>
		  </view>
	  </view>
	  
	  <view class="detail-block">
		<view class="detail-block-title">其他事项</view>
		<view class="detail-block-main submitter">
			<view  v-if="receipt.remarks">{{receipt.remarks}}</view>
			<view class="remarks" v-else>借款事项备注</view>
		</view>
	  </view>
	  
	  
	  <!--
	  <view class="top">
	  	<image src="../../../static/images/loginLogo.png" mode="" class="img"></image>
	  	  <view >
	  	 	<view class="username">{{receipt.obligor.username}}</view>
			<view class="mobile">{{receipt.obligor.mobile}}</view>
	  	  </view>
	  </view>
	  
		<view class="essential">基本信息</view>
		<view class="item">
		 <view >合约总额：{{receipt.loan_money}}￥</view>	
		</view>
		<view class="item">
		 <view >状态：{{receipt.repay_status }}</view>	
		</view>
		
		
		<view class="essential">付款信息</view>
		  <view class="item">
		 <view >近期还款时间：{{receipt.repay_date}}</view>	
		</view>
		<view class="item" v-if="receipt.repay_type=='一次性还款'">
		 <view  >借款周期：{{receipt.loan_date}}到{{receipt.repay_date}}</view>	
		</view>
		<view class="item">
		 <view >还款方式：{{receipt.repay_type}}</view>	
		</view>
		<view class="item" v-if="receipt.repay_type!='一次性还款'">
		<view
		  >付款周期：每期还款{{ receipt.cycle_money }}元，共{{
			receipt.cycle_num
		  }}期 <view v-if="receipt.repay_type != '灵活分期'">，还款日每月{{ receipt.date }}日</view></view
		>
		</view>
		<view class="item">
		 <view >年化利率：{{receipt.year_rate}}%</view>	
		</view>
		<view class="essential">其它事项</view>
		<view class="submitter">
			<view  v-if="receipt.remarks">{{receipt.remarks}}</view>	
			<view class="remarks" v-else>借款事项备注</view>
		</view>
		<view class="essential">其它事项</view>
		<view class="submitter">
			<view  v-if="receipt.remarks">{{receipt.remarks}}</view>	
			<view class="remarks" v-else>借款事项备注</view>
		</view>
		-->
		<view class="table">
		<u-table >
			<u-tr class="u-tr">
				<u-th class="u-th">销账时间</u-th>
				<u-th class="u-th">销账来源</u-th>
				<u-th class="u-th">销账金额</u-th>
				<u-th class="u-th">剩余金额</u-th>
			</u-tr>
			<u-tr class="u-tr" v-for="(item,index) in repay_record" :key="index">
					<u-td class="u-td">{{item.pay_date}}</u-td>
					<u-td class="u-td">{{item.pay_from}}</u-td>
					<u-td class="u-td">{{item.principal}}</u-td>
					<u-td class="u-td">{{item.surplus}}</u-td>
			</u-tr>
			<view class="record" v-if="repay_record.length==0">
			暂无数据
			</view>
		</u-table>
	</view>
  </view>

</template>

<script>
	import date from '@/utils/date'
	import {
		mapState,mapMutations,
		mapActions
	} from 'vuex'
	
	
	
 export default {
   data () {
     return {

     }
   },
   components: {

   },
   methods: {
    ...mapActions({
	 getNoteDetails:'MAY_DEBT/GET_NOTE_DETAILS'//获取合约详情	
	}),
	num2chinese: date.num2chinese
   },
   mounted() {
   },
   watch: {

   },
   onLoad(options){
	  this.getNoteDetails(options.id) 
   },
   computed: {
    ...mapState({
		receipt:(state)=>state.MAY_DEBT.receipt,
		repay_record:(state)=>state.MAY_DEBT.repay_record,
	})
   }
 }
</script>

<style scoped lang='scss'>
@import '@/common/debtDetails.scss';
	.table{
		margin-top: 38rpx;
		padding-bottom: 20rpx;
	}
	.u-td {
		width: 180rpx;
		height: 100rpx;
	}
</style>
<style>
	page {
		background: #FAFAFA;
	}
</style>